<template>
  <div v-if="product">
    <div class="product">
      <div class="product-image">
        <img :src="product.image" alt="图片">
      </div>
      <div class="product-info">
        <h1 class="product-name">{{ product.name }}</h1>
        <div class="product-cost">￥ {{ product.cost }}</div>
        <div class="product-add-cart" @click="handleAddToCart">加入购物车</div>
      </div>
    </div>
    <div class="product-desc">
      <h2>产品介绍</h2>
      <img src="https://images.unsplash.com/photo-1493589976221-c2357c31ad77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="网速好慢">
    </div>
  </div>
</template>

<script>
import productData from '../assets/product'
export default {
  name: 'product',
  data () {
    return {
      id: parseInt(this.$route.params.id),
      product: null
    }
  },
  methods: {
    getProduct () {
      setTimeout(() => {
        this.product = productData.find(item => item.id === this.id)
      }, 500)
    },
    handleAddToCart () {
      this.$store.commit('addCart', this.id)
    }
  },
  mounted () {
    this.getProduct()
  }
}
</script>

<style scoped>
  .product{
    margin: 32px;
    padding: 32px;
    background: #fff;
    border: 1px solid #dddee1;
    border-radius: 10px;
    overflow: hidden;
  }
  .product-image{
    width: 50%;
    height: 550px;
    float: left;
    text-align: center;
  }
  .product-image img{
    height: 100%;
  }
  .product-info{
    width: 50%;
    padding: 150px 0 250px;
    height: 150px;
    float: left;
    text-align: center;
  }
  .product-cost{
    color: #f2352e;
    margin: 8px 0;
  }
  .product-add-cart{
    display: inline-block;
    padding: 8px 64px;
    margin: 8px 0;
    background: #2d8cf0;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
  }
  .product-desc{
    background: #fff;
    margin: 32px;
    padding: 32px;
    border: 1px solid #dddee1;
    border-radius: 10px;
    text-align: center;
  }
  .product-desc img{
    display: block;
    width: 50%;
    margin: 32px auto;
    padding: 32px;
    border-bottom: 1px solid #dddee1;
  }
</style>
